<template>
    <div>
        <el-form :inline="true" :model="parameter" class="demo-form-inline">
            <el-form-item>
                <el-select v-model="parameter.examine" placeholder="状态" class="input">
                    <el-option label="未审核" :value="1"></el-option>
                    <el-option label="同意" :value="3"></el-option>
                    <el-option label="驳回" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getOrderList()">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" width="79">
            </el-table-column>
            <el-table-column prop="count" label="数量">
            </el-table-column>
            <el-table-column prop="total" label="总金额">
            </el-table-column>
            <el-table-column prop="name" label="申请人">
            </el-table-column>
            <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.examine === 1" type="warning">未审核</el-tag>
                    <el-tag v-else-if="scope.row.examine === 3" type="success">同意</el-tag>
                    <el-tag v-else-if="scope.row.examine === 2" type="danger">驳回</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="updateOrder(scope.row.id)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="currentSize" @current-change="currPage" :pager-count="5"
            :page-size="parameter.pageSize" :page-sizes="[5, 10, 15]" :current-page="parameter.currentPage"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            total: 0,
            parameter: {
                pageSize: 5,
                currentPage: 1,
                examine: ''
            }
        }
    },
    methods: {
        getOrderList() {
            console.log(this.parameter)
            this.$axios.post('order/list', this.parameter).then(res => {
                if (res.data.code === 200) {
                    console.log(res)
                    this.tableData = res.data.data.orderList
                    this.total = res.data.data.total
                }
            })
        },
        currentSize(newSize) {
            this.parameter.pageSize = newSize
            this.getOrderList()
        },
        currPage(newPage) {
            this.parameter.currentPage = newPage
            this.getOrderList()
        },
        updateOrder(id) {
            this.$confirm('是否同意该订单', '审核', {
                confirmButtonText: '同意',
                cancelButtonText: '驳回',
                type: 'info'
            }).then(() => {
                this.$axios.get('order/update/' + id + '/' + 3).then(response => {
                    if (response.data.code === 200) {
                        this.$message.success(response.data.message)
                        this.getOrderList()
                    } else {
                        this.$message.error(response.data.message)
                    }
                })
            }).catch(() => {
                this.$axios.get('order/update/' + id + '/' + 2).then(response => {
                    if (response.data.code === 200) {
                        this.$message.success(response.data.message)
                        this.getOrderList()
                    } else {
                        this.$message.error(response.data.message)
                    }
                })
            });
        }
    },
    created() {
        this.getOrderList()
    }
}
</script>

<style scoped>

</style>
